<template>
  <div class="app-container">
    <el-card>

      <el-form>
        <el-form-item style="margin-bottom: 10px;">
          <el-button
            v-permission="['admin', 'club_type_add']"
            type="primary"
            size="small"
            icon="el-icon-plus"
            @click.native="showCreateDialog"
          >新增社团分类</el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="listLoading"
        :data="dataList"
        style="width: 100%;margin-top:10px;"
        max-height="600px"
        border
        highlight-current-row
        :header-cell-style="{background:'#f5f7fa'}"
      >
        <el-table-column align="center" label="分类名称" prop="name" />
        <el-table-column label="是否启用" align="center">
          <template slot-scope="{row}">
            <el-tag :type="row.is_active | activeStyleFilter">
              {{ row.is_active | activeTextFilter }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="120px" align="center">
          <template slot-scope="{row, $index}">
            <el-button
              v-permission="['admin', 'club_type_update']"
              type="primary"
              size="mini"
              plain
              icon="el-icon-edit"
              @click="showUpdateDialog(row)"
            > 编辑 </el-button>
            <el-button
              v-if="row.is_active"
              v-permission="['admin', 'club_type_update']"
              type="danger"
              size="mini"
              plain
              icon="el-icon-refresh"
              @click="changeActive(row, $index)"
            > 禁用 </el-button>
            <el-button
              v-else
              v-permission="['admin', 'club_type_update']"
              type="success"
              size="mini"
              plain
              icon="el-icon-refresh"
              @click="changeActive(row, $index)"
            > 启用 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </el-card>

    <el-dialog
      :title="dialogText"
      :visible.sync="dialogFormVisible"
      width="50%"
    >
      <el-form ref="form" status-icon :model="form" :rules="rulesList" label-position="left" label-width="100px">
        <el-form-item label="分类名" prop="name">
          <el-input v-model="form.name" style="width:70%" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogStatus === 'create'? createData() : updateData()">
          确定
        </el-button>
        <el-button @click.native="dialogFormVisible = false">
          取消
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script src="./index.js"></script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
